<template>
  <div v-if="appInfo != null" class="app-detail">
    <el-page-header content="" @back="goToAppStore" />
    <div class="flex justify-between" style="margin: 20px 0px">
      <div>
        <div class="flex">
          <img style="height: 110px; width: 110px" :src="iconView(appInfo.appIconUrl)" />
          <div class="ml-4 mt-4">
            <h1 class="page-title">{{ appInfo.appName }}</h1>
            <p class="text-muted" style="color: #99a9bf">
              {{ $t("appstore.application.lastestVersionName") }}:
              {{ appInfo.lastestVersionName }}
            </p>
            <p class="text-muted" style="color: #99a9bf">
              {{ $t("appstore.application.developerName") }}:
              {{ appInfo.keyName }}
            </p>
          </div>
        </div>
      </div>
      <div>
        <div class="mini-tag">
          <div class="mini-tag-label">
            {{ $t("appstore.application.status") }}
          </div>
          <div class="mini-tag-content" style="">
            {{ handleStatus(appInfo.status) }}
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('common.detail')" name="first">
        <el-descriptions
          v-loading="dataListLoading"
          direction="vertical"
          class="margin-top"
          title=""
          :column="16"
          size="60"
          border
        >
          <template #extra />
          <!--          <el-descriptions-item :label="$t('appstore.application.appName')" :span="3">-->
          <!--            {{ appInfo.appName }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.lastestVersionName')" :span="3">-->
          <!--            {{ appInfo.lastestVersionName }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.categoryName')" :span="3">-->
          <!--            {{ appInfo.categoryName }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.packageName')" :span="3">-->
          <!--            {{ appInfo.packageName }}-->
          <!--          </el-descriptions-item>-->
          <!--          &lt;!&ndash;          <el-descriptions-item :label="$t('appstore.application.releaseTarget')" :span="3">&ndash;&gt;-->
          <!--          &lt;!&ndash;            <div v-if="appInfo.releaseTarget == 1">{{ $t('appstore.application.releaseTarget1') }}</div>&ndash;&gt;-->
          <!--          &lt;!&ndash;            <div v-if="appInfo.releaseTarget == 2">{{ $t('appstore.application.releaseTarget2') }}</div>&ndash;&gt;-->
          <!--          &lt;!&ndash;            <div v-if="appInfo.releaseTarget == 3">{{ $t('appstore.application.releaseTarget3') }}</div>&ndash;&gt;-->
          <!--          &lt;!&ndash;          </el-descriptions-item>&ndash;&gt;-->
          <!--          <el-descriptions-item :label="$t('appstore.application.developerName')" :span="3">-->
          <!--            {{ appInfo.keyName }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.support_device_type')" :span="4">-->
          <!--            <el-tag v-if='appInfo.landscape === 1' style='margin-left: 5px' size='small'>{{ $t('appstore.application.landscape') }}</el-tag>-->
          <!--            <el-tag v-if='appInfo.portrait === 1' style='margin-left: 5px' size='small'>{{ $t('appstore.application.portrait') }}</el-tag>-->
          <!--          </el-descriptions-item>-->
          <!--          &lt;!&ndash;          <el-descriptions-item :label="$t('appstore.application.bankcardApp')" :span="3">&ndash;&gt;-->
          <!--          &lt;!&ndash;            <el-checkbox v-model="appInfo.bankcardApp === 1" disabled>{{ $t('appstore.application.bankcardApp') }}&ndash;&gt;-->
          <!--          &lt;!&ndash;            </el-checkbox>&ndash;&gt;-->
          <!--          &lt;!&ndash;          </el-descriptions-item>&ndash;&gt;-->
          <!--          &lt;!&ndash;          <el-descriptions-item :label="$t('appstore.application.highQuality')" :span="3">&ndash;&gt;-->
          <!--          &lt;!&ndash;            <el-checkbox v-model="appInfo.highQuality === 1" disabled>{{ $t('appstore.application.highQuality') }}&ndash;&gt;-->
          <!--          &lt;!&ndash;            </el-checkbox>&ndash;&gt;-->
          <!--          &lt;!&ndash;          </el-descriptions-item>&ndash;&gt;-->
          <!--          <el-descriptions-item :label="$t('appstore.application.mainLanguage')" :span="3">-->
          <!--&lt;!&ndash;            <el-select v-model="appInfo.mainLanguage" size="small" disabled>&ndash;&gt;-->
          <!--&lt;!&ndash;              <el-option&ndash;&gt;-->
          <!--&lt;!&ndash;                v-for="lang in langList"&ndash;&gt;-->
          <!--&lt;!&ndash;                :key="lang.val"&ndash;&gt;-->
          <!--&lt;!&ndash;                :value="lang.val"&ndash;&gt;-->
          <!--&lt;!&ndash;                :label="lang.label"&ndash;&gt;-->
          <!--&lt;!&ndash;              />&ndash;&gt;-->
          <!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
          <!--            <el-tag size='small'>{{ $t('language_list.' + appInfo.mainLanguage) }}</el-tag>-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.supportLanguage')" :span="3">-->
          <!--&lt;!&ndash;            <el-select&ndash;&gt;-->
          <!--&lt;!&ndash;              v-model="appInfo.supportLanguage"&ndash;&gt;-->
          <!--&lt;!&ndash;              multiple&ndash;&gt;-->
          <!--&lt;!&ndash;              disabled&ndash;&gt;-->
          <!--&lt;!&ndash;              default-first-option&ndash;&gt;-->
          <!--&lt;!&ndash;              filterable&ndash;&gt;-->
          <!--&lt;!&ndash;              style="width: 100%"&ndash;&gt;-->
          <!--&lt;!&ndash;            >&ndash;&gt;-->
          <!--&lt;!&ndash;              <el-option&ndash;&gt;-->
          <!--&lt;!&ndash;                v-for="lang in langList"&ndash;&gt;-->
          <!--&lt;!&ndash;                :key="lang.id"&ndash;&gt;-->
          <!--&lt;!&ndash;                :value="lang.val"&ndash;&gt;-->
          <!--&lt;!&ndash;                :label="lang.label"&ndash;&gt;-->
          <!--&lt;!&ndash;              />&ndash;&gt;-->
          <!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
          <!--            <div style='line-height: 2.4'>-->
          <!--              <el-tag-->
          <!--                style='margin-left: 5px'-->
          <!--                size='small'-->
          <!--                v-for="language in appInfo.supportLanguage"-->
          <!--                :key="language">{{ $t('language_list.' + language) }}</el-tag>-->
          <!--            </div>-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.release_area')" :span="3">-->
          <!--            <el-select-->
          <!--              v-model="appInfo.releaseArea"-->
          <!--              multiple-->
          <!--              disabled-->
          <!--              default-first-option-->
          <!--              filterable-->
          <!--              style="width: 100%"-->
          <!--            >-->
          <!--              <el-option-->
          <!--                v-for="area in countries"-->
          <!--                :key="area.countryCode3"-->
          <!--                :value="area.countryCode3"-->
          <!--                :label="area.countryNameEn"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.creTime')" :span="3">-->
          <!--            {{ formatDate(appInfo.creTime) }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.updTime')" :span="3">-->
          <!--            {{ formatDate(appInfo.updTime) }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item :label="$t('appstore.application.appIntroduction')" :span="12">-->
          <!--            <p v-html="appInfo.appIntroduction"></p>-->
          <!--          </el-descriptions-item>-->
          <el-descriptions-item :label="$t('appstore.application.appName')" :span="4">
            {{ appVersionInfo.appName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('appstore.application.appVersion')" :span="4">
            {{ appVersionInfo.appVersion }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('appstore.application.appVersionCode')"
            :span="4"
          >
            {{ appVersionInfo.appVersionCode }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('developer_app.version_status')" :span="4">
            <!--            <el-tag>{{ handleStatus(appVersionInfo.status) }}</el-tag>-->
            <el-tag
              v-if="
                appVersionInfo.status === -1 ||
                appVersionInfo.status === 0 ||
                appVersionInfo.status === 2 ||
                appVersionInfo.status === 6
              "
              size="small"
              type="warning"
              >{{ handleStatus(appVersionInfo.status) }}</el-tag
            >
            <el-tag v-if="appVersionInfo.status === 1" size="small" type="success">{{
              handleStatus(appVersionInfo.status)
            }}</el-tag>
            <el-tag
              v-if="
                appVersionInfo.status === 5 ||
                appVersionInfo.status === 7 ||
                appVersionInfo.status === 9
              "
              size="small"
              type="private"
              >{{ handleStatus(appVersionInfo.status) }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item :label="$t('appstore.application.appSize')" :span="4">
            {{ appVersionInfo.appSize }} MB
          </el-descriptions-item>
          <el-descriptions-item :label="$t('appstore.application.packageName')" :span="4">
            {{ appVersionInfo.packageName }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('appstore.application.support_device_type')"
            :span="4"
          >
            <el-tag
              v-if="appVersionInfo.landscape === 1"
              style="margin-left: 5px"
              size="small"
              >{{ $t("appstore.application.landscape") }}</el-tag
            >
            <el-tag
              v-if="appVersionInfo.portrait === 1"
              style="margin-left: 5px"
              size="small"
              >{{ $t("appstore.application.portrait") }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('appstore.application.developerName')"
            :span="4"
          >
            {{ appVersionInfo.developerName }}
          </el-descriptions-item>

          <el-descriptions-item
            :label="$t('appstore.application.mainLanguage')"
            :span="4"
          >
            <el-tag size="small">{{
              $t("language_list." + appVersionInfo.mainLanguage)
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('appstore.application.supportLanguage')"
            :span="4"
          >
            <div style="line-height: 2.4">
              <el-tag
                v-for="language in appVersionInfo.supportLanguage"
                :key="language"
                style="margin-left: 5px"
                size="small"
                >{{ $t("language_list." + language) }}</el-tag
              >
            </div>
          </el-descriptions-item>

          <el-descriptions-item
            :label="$t('appstore.application.release_area')"
            :span="8"
          >
            <!--            <el-select-->
            <!--              v-model="appVersionInfo.releaseArea"-->
            <!--              multiple-->
            <!--              disabled-->
            <!--              default-first-option-->
            <!--              filterable-->
            <!--              style="width: 100%"-->
            <!--            >-->
            <!--              <el-option-->
            <!--                v-for="area in countries"-->
            <!--                :key="area.countryCode3"-->
            <!--                :value="area.countryCode3"-->
            <!--                :label="area.countryNameEn"-->
            <!--              />-->
            <!--            </el-select>-->
            <el-tag v-for="area in appVersionInfo.releaseArea" :key="area" size="small">{{
              $t("country_or_region." + area)
            }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item :label="$t('appstore.application.submitTime')" :span="4">
            {{ formatDate(appVersionInfo.submitTime) }}
          </el-descriptions-item>

          <el-descriptions-item
            v-if="appVersionInfo.status !== 7"
            :label="$t('developer_app.initial_examine.examine_time')"
            :span="4"
          >
            {{ formatDate(appVersionInfo.initialExaminePassTime) }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('developer_app.app_resource')" :span="12">
            <el-button type="primary" size="small" @click="viewImage">{{
              $t("developer_app.app_image")
            }}</el-button>
            <el-button type="primary" size="small" @click="viewPermission"
              >{{ $t("developer_app.app_permission") }}
            </el-button>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 多语言 -->
        <div
          class="language-block"
          style="
            border: 1px solid #eeeeee;
            border-radius: 6px;
            margin-top: 16px;
            margin-bottom: 16px;
          "
        >
          <div
            v-for="(obj, index) in appVersionInfo.appLanguageInfos"
            :key="obj.language"
            class="text-gray-500 px-4 language-block__item"
          >
            <!-- <div
              class="flex justify-between items-center"
              role="button"
              @click="showLanguageInfo(index)"
            >
              <div style="padding: 16px 0">{{ $t("language_list." + obj.language) }}</div>
              <div class="flex flex-center">
                <i
                  class="el-icon-arrow-right mr-3 transition-all ml-5"
                  :class="{ 'transform rotate-90': obj.isActive }"
                />
              </div>
            </div> -->

            <el-descriptions
              v-if="obj.isActive"
              style="padding-bottom: 16px"
              :column="1"
              border
            >
              <el-descriptions-item label-style="width: 200px">
                <template #label>{{
                  $t("appstore.application.appIntroduction")
                }}</template>
                <div class="html-container">
                  <div style="padding: 12px" v-html="obj.introduction" />
                </div>
              </el-descriptions-item>
              <el-descriptions-item
                label-style="width: 200px"
                :label="$t('appstore.application.revision')"
              >
                <div class="html-container">
                  <div style="padding: 12px" v-html="obj.revision" />
                </div>
              </el-descriptions-item>
              <el-descriptions-item
                v-if="landscapePicUrls.length || portraitPicUrls.length"
                label-style="width: 200px"
              >
                <template #label>{{ $t("appstore.application.screenshots") }}</template>
                <div>
                  <div style="text-align: center; padding: 8px">
                    <el-radio v-model="screenshotType" :label="1" :disabled="!landscape">
                      {{ $t("appstore.application.horizontalScreenshot") }}
                    </el-radio>
                    <el-radio v-model="screenshotType" :label="2" :disabled="!portrait">
                      {{ $t("appstore.application.verticalScreenshot") }}
                    </el-radio>
                  </div>
                  <el-carousel
                    v-if="screenshotType === 1"
                    :interval="4000"
                    type="card"
                    height="214px"
                  >
                    <el-carousel-item v-for="img in landscapePicUrls" :key="img.url">
                      <h3 class="medium">
                        <el-image
                          :src="baseApiUrl + img.url"
                          :preview-src-list="getImgList(landscapePicUrls)"
                        />
                      </h3>
                    </el-carousel-item>
                  </el-carousel>

                  <el-carousel
                    v-else-if="screenshotType === 2"
                    :interval="4000"
                    type="card"
                    height="380px"
                  >
                    <el-carousel-item v-for="img in portraitPicUrls" :key="img.url">
                      <h3 class="small">
                        <el-image
                          :src="baseApiUrl + img.url"
                          :preview-src-list="getImgList(portraitPicUrls)"
                        />
                      </h3>
                    </el-carousel-item>
                  </el-carousel>

                  <div v-else class="data-empty">
                    <icon-svg class="data-empty-icon" name="chart-data-empty" />
                    <div class="data-empty-text">{{ $t("common.noData") }}</div>
                  </div>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('appstore.examine.modelList')" name="second">
        <!--        <AppVersion ref="appVersion" @close="getData()" />-->
        <el-table
          v-loading="dataListLoading2"
          :data="dataList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="modelCode"
            header-align="center"
            align="center"
            min-width="150"
            :label="$t('appstore.examine.modelCode')"
          />
          <el-table-column
            prop="status"
            header-align="center"
            align="center"
            min-width="120"
            :label="$t('appstore.application.status')"
          >
            <template v-slot="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="info"
                >{{ $t("appstore.examine.status0") }}
              </el-tag>
              <el-tag v-if="scope.row.status === 1" size="small">{{
                $t("appstore.examine.status1")
              }}</el-tag>
              <el-tag v-if="scope.row.status === 2" size="small" type="danger"
                >{{ $t("appstore.examine.status2") }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="examiner"
            header-align="center"
            align="center"
            min-width="120"
            :label="$t('appstore.application.examiner')"
          />
          <el-table-column
            prop="updTime"
            header-align="center"
            align="center"
            min-width="100"
            :label="$t('appstore.examine.testTime')"
          >
            <template v-slot="{ row }">
              <div :title="timeFilter(row.updTime)">{{ dateFilter(row.updTime) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            min-width="120"
            :label="$t('common.remark')"
          />
          <el-table-column
            header-align="center"
            align="center"
            width="100"
            fixed="right"
            :label="$t('common.operate')"
          >
            <template v-slot="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('contact.edit_remark')"
                placement="top"
              >
                <el-button
                  v-permission="{ permission: '10400606.MANAGE' }"
                  type="text"
                  @click="showDetailHandle(scope.row)"
                  ><i class="el-icon-info" />
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="rows"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
        />
      </el-tab-pane>

      <el-dialog
        :close-on-click-modal="false"
        :visible="this.visible"
        :title="$t('contact.edit_remark')"
        width="40%"
        @close="cancel"
      >
        <el-form ref="dataForm" :model="dataForm" :rules="rules">
          <el-input
            v-model="remark"
            type="textarea"
            class="center mb-4"
            :rows="10"
            :maxlength="512"
          />
          <el-form-item class="support-device" prop="supportDeviceType">
            <div class="upload-field">
              <el-row v-if="landscape" type="flex" class="mb-5">
                <el-upload
                  class="picture-uploader--landscape"
                  action
                  list-type="picture-card"
                  :auto-upload="false"
                  :file-list="landscapeImageFileList"
                  :on-change="uploadLandscapeFile"
                  :on-remove="handleLandscapeImageFileRemove"
                  accept=".png, .jpg"
                >
                  <i class="el-icon-plus" />
                </el-upload>
              </el-row>
              <el-row v-if="portrait" type="flex">
                <el-upload
                  class="picture-uploader--portrait"
                  action
                  list-type="picture-card"
                  :auto-upload="false"
                  :file-list="portraitImageFileList"
                  :on-change="uploadPortraitFile"
                  :on-remove="handlePortraitImageFileRemove"
                  accept=".png, .jpg"
                >
                  <i class="el-icon-plus" />
                </el-upload>
              </el-row>
              <p>{{ $t("appstore.examine.screenshots_tip") }}</p>
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="cancel">{{ $t("common.cancel") }}</el-button>

            <el-button type="primary" size="small" @click="submitInfo"
              >{{ $t("common.submit") }}
            </el-button>
          </span></template
        >
      </el-dialog>
    </el-tabs>
    <view-res v-if="viewResVisible" ref="viewRes" @close="viewResVisible = false" />
  </div>
</template>

<script>
import {
  getAppVersionInfo,
  getAppInfo,
  screenshotList,
  updateHighQualityStatus,
  examListDetail,
  examListRemark,
} from "@/api/developer-app";
import { formatDate } from "@/utils/formatDate";
import { timeFilter, dateFilter } from "@/filters";
import AppVersion from "./components/app-version";
import AppRevision from "./components/app-revision";
import AppDownload from "./components/app-download";
import { getCountryList } from "@/api/operator";
import { uploadScreenshot } from "@/api/developer-app";
import ViewRes from "./components/view-res";

var blockFun = function () {
  // 兼容处理
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase() === "a") {
    console.log("当前点击的 a 标签: ", target);

    // 对捕获到的 a 标签进行处理，需要先禁止它的跳转行为
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      window.event.returnValue = true;
    }

    // 处理完 a 标签的内容，重新触发跳转，根据原来 a 标签页 target 来判断是否需要新窗口打开

    var url = target.getAttribute("href");
    if (target.getAttribute("target") === "_blank") {
      window.goRoute(url);
    } else {
      window.location.href = url;
    }
  }
};

export default {
  components: {
    AppVersion,
    AppRevision,
    AppDownload,
    ViewRes,
  },
  data() {
    return {
      appLanguageInfos: [],
      baseApiUrl: import.meta.env.VITE_APP_BASE_API,
      portrait: false,
      portraitPicUrls: [],
      landscape: false,
      landscapePicUrls: [],
      viewResVisible: false,
      appId: 0,
      appVersionId: 0,
      appInfo: null,
      appVersionInfo: null,
      appAgreement: "",
      screenshotType: 1,
      screenshots_h: [],
      screenshots_v: [],
      countries: [],
      activeName: "first",
      dataListLoading: false,
      agreementLoading: false,
      tempEnlargedPicture: [],
      pageNo: 1,
      pageSize: 10,
      dataList: [],
      rows: 0,
      dataListLoading2: false,
      visible: false,
      remark: "",
      editForm: {},
      langList: [
        { val: "zh_CN", label: this.$t("language_list.zh_CN") },
        { val: "en_US", label: this.$t("language_list.en_US") },
        { val: "ko", label: this.$t("language_list.ko") },
        { val: "jp", label: this.$t("language_list.jp") },
        { val: "pt", label: this.$t("language_list.pt") },
        { val: "ru", label: this.$t("language_list.ru") },
        { val: "fr", label: this.$t("language_list.fr") },
        { val: "de", label: this.$t("language_list.de") },
        { val: "es", label: this.$t("language_list.es") },
        { val: "it", label: this.$t("language_list.it") },
        { val: "ar", label: this.$t("language_list.ar") },
        { val: "other", label: this.$t("language_list.other") },
      ],

      releaseLoading: false,
      showProgressPercent: false,
      showUploadErrorInfo: false,
      supportDeviceRuleFlag: false,
      progressPercent: 0,
      file: "",
      step: 0,
      fileList: [],
      landscapeImageFileList: [],
      portraitImageFileList: [],
      imageFileUuidList: [],
      categories: [],
      source: undefined,
      uploadStatus: 0,
      dataForm: {
        appId: "",
        appVersionId: "",
        uploadErrorInfo: "",
        apkFileUuid: "",
        appIconUrl: "",
        appName: "",
        packageName: "",
        versionName: "",
        versionCode: "",
        landscape: 0,
        portrait: 1,
        appIntroduction: "",
        revision: "",
        categoryId: 1,
        mainLanguage: "",
        supportLanguage: "",
        testAccount: "",
        testPassword: "",
        releaseType: 1,
      },
    };
  },
  computed: {
    rules() {
      return {
        supportDeviceType: [
          {
            required: true,
            message: this.$t("appstore.examine.support_device_type"),
            trigger: "blur",
          },
        ],
      };
    },
  },

  mounted() {
    window.goRoute = this.goRoute;
    document.body.addEventListener("click", blockFun);
    this.activeName = "first";
    this.dataListLoading = true;
    this.appId = this.$route.query.appId;
    this.appVersionId = this.$route.query.appVersionId;
    this.$nextTick(() => {
      this.getData();
    });
    this.getCountryList();
  },
  destroyed() {
    document.body.removeEventListener("click", blockFun);
  },
  methods: {
    timeFilter,
    dateFilter,
    getImgList(list) {
      const ret = [];
      for (const url of list) {
        ret.push(import.meta.env.VITE_APP_BASE_API + url.url);
      }
      return ret;
    },
    goRoute(url) {
      const encodeUri = encodeURIComponent(url);
      const routeUrl = this.$router.resolve({
        path: "/out-link",
        query: { target: encodeUri },
      });
      window.open(routeUrl.href, "_blank");
    },
    showLanguageInfo(index) {
      this.appVersionInfo.appLanguageInfos.map((item) => (item.isActive = false));
      this.landscapePicUrls = this.appVersionInfo.appLanguageInfos[
        index
      ].applicationScreenshotList.filter((v) => {
        return v.screenType === 1;
      });
      this.portraitPicUrls = this.appVersionInfo.appLanguageInfos[
        index
      ].applicationScreenshotList.filter((v) => {
        return v.screenType === 2;
      });
      this.appVersionInfo.appLanguageInfos[index].isActive = true;
    },
    getCountryList() {
      getCountryList()
        .then((data) => {
          this.countries = data;
        })
        .catch((err) => {
          this.$confirmError(err);
        });
    },
    countryFilter(areaCode) {
      let area = {};
      this.countries.forEach((item) => {
        if (item.countryCode3 === areaCode) {
          area = item;
        }
      });
      if (this.$i18n.locale === "en-US") {
        return area.countryNameEn;
      } else if (this.$i18n.locale === "zh-CN") {
        return area.countryNameZh;
      }
      return area.countryNameEn;
    },
    uploadPortraitFile(file, fileList) {
      if (!this.portrait) {
        this.$message.warning(this.$t("appstore.examine.select_support_portrait_device"));
        return;
      }
      if (fileList.length > 9) {
        fileList.splice(fileList.length - 1);
        this.$message.warning(this.$t("appstore.examine.screenshots_lenght_limit_tip"));
        return;
      }
      const screenType = 2; // 1横屏2竖屏
      this.uploadImg(file, screenType, fileList);
    },
    uploadLandscapeFile(file, fileList) {
      if (!this.landscape) {
        this.$message.warning(
          this.$t("appstore.examine.select_support_landscape_device")
        );
        return;
      }
      if (fileList.length > 9) {
        fileList.splice(fileList.length - 1);
        this.$message.warning(this.$t("appstore.examine.screenshots_lenght_limit_tip"));
        return;
      }
      const screenType = 1; // 1横屏2竖屏
      this.uploadImg(file, screenType, fileList);
    },
    uploadImg(file, type, fileList) {
      const size = (file.size / 1024).toFixed(2);
      if (size > 500) {
        fileList.splice(fileList.length - 1);
        this.$message({
          type: "warning",
          message: this.$t("appstore.examine.screenshots_tip"),
        });
        return;
      }
      const formdata = new FormData();
      formdata.append("file", file.raw);
      // appImageUpload(formdata).
      uploadScreenshot(formdata)
        .then((res) => {
          if (res) {
            const fileUuidObj = {
              screenType: type,
              fileUuid: `${res.fileUuid}`,
              fileName: file.name,
              url: "",
            };
            if (type === 1) {
              this.landscapeImageFileList.push({
                fileUuid: `${res.fileUuid}`,
                file: file,
                name: file.name,
                url: URL.createObjectURL(file.raw),
              });
            } else if (type === 2) {
              this.portraitImageFileList.push({
                fileUuid: `${res.fileUuid}`,
                file: file,
                name: file.name,
                url: URL.createObjectURL(file.raw),
              });
            }
            this.imageFileUuidList.push(fileUuidObj);
            this.$message({
              message: this.$t("appstore.examine.image_added_successfully"),
              type: "success",
            });
          }
        })
        .catch((e) => {
          fileList.splice(fileList.length - 1);
          this.$confirmError(e);
        });
      // http({
      //   method: 'POST',
      //   url: http.adornDeveloperAdminUrl(`/online/developer-admin/app/upload/screenshot`),
      //   data: formdata
      // }).then(res => {
      //   if (res) {
      //     const fileUuidObj = {
      //       'screenType': type,
      //       'fileUuid': `${res.data.fileUuid}`,
      //       'fileName': file.name,
      //       'url': ''
      //     }
      //     if (type === 1) {
      //       this.landscapeImageFileList.push({
      //         fileUuid: `${res.data.fileUuid}`,
      //         file: file,
      //         name: file.name,
      //         url: URL.createObjectURL(file.raw)
      //       })
      //     } else if (type === 2) {
      //       this.portraitImageFileList.push({
      //         fileUuid: `${res.data.fileUuid}`,
      //         file: file,
      //         name: file.name,
      //         url: URL.createObjectURL(file.raw)
      //       })
      //     }
      //     console.log(this.portraitImageFileList)
      //     this.imageFileUuidList.push(fileUuidObj)
      //     this.$message({
      //       message: this.$t('appstore.examine.image_added_successfully'),
      //       type: 'success'
      //     })
      //   }
      // }).catch(e => {
      //   fileList.splice(fileList.length - 1)
      //   this.$confirmError(e)
      // })
    },
    handleLandscapeImageFileRemove(file, fileList) {
      this.landscapeImageFileList.forEach((item) => {
        if (item.name === file.name) {
          this.imageFileUuidList = this.imageFileUuidList.filter(
            (item) => item.fileName !== file.name
          );
        }
      });
      this.landscapeImageFileList = this.landscapeImageFileList.filter(
        (item) => item.name !== file.name
      );
    },
    handlePortraitImageFileRemove(file, fileList) {
      this.portraitImageFileList.forEach((item) => {
        if (item.name === file.name) {
          this.imageFileUuidList = this.imageFileUuidList.filter(
            (item) => item.fileName !== file.name
          );
        }
      });
      this.portraitImageFileList = this.portraitImageFileList.filter(
        (item) => item.name !== file.name
      );
    },

    showEnlargedPicture(url) {
      this.tempEnlargedPicture.length = 0;
      this.tempEnlargedPicture.push(url);
    },
    handleStatus(status) {
      if (status === 9) {
        return this.$t("developer_app.version_status_option[0].label");
      } else if (status === 7) {
        return this.$t("developer_app.version_status_option[1].label");
      } else if (status === 6) {
        return this.$t("developer_app.version_status_option[2].label");
      } else if (status === 5) {
        return this.$t("developer_app.version_status_option[3].label");
      } else if (status === 2) {
        return this.$t("developer_app.version_status_option[4].label");
      } else if (status === 1) {
        return this.$t("developer_app.version_status_option[5].label");
      } else if (status === 0) {
        return this.$t("developer_app.version_status_option[6].label");
      } else if (status === -1) {
        return this.$t("developer_app.version_status_option[7].label");
      }
    },
    goToAppStore() {
      this.$router.back();
    },
    iconView(icon) {
      if (icon) {
        return import.meta.env.VITE_APP_BASE_API + icon;
        // return icon
      }
      return require("@/assets/img/Android.png");
    },
    updateHighQualityStatus() {
      let params = {};
      if (this.appInfo.highQuality === 1) {
        params = { highQualityStatus: 0 };
      } else if (this.appInfo.highQuality === 0) {
        params = { highQualityStatus: 1 };
      }
      updateHighQualityStatus(this.appId, params)
        .then((data) => {
          if (data && data === 1) {
            this.$message.success(this.$t("common.operate_success"));
            this.dataListLoading = true;
            getAppInfo(this.appId)
              .then((data) => {
                this.appInfo = data;
                this.dataListLoading = false;
              })
              .catch((e) => {
                this.$confirmError(e);
                this.dataListLoading = false;
              });
          } else {
            this.$message.error(data.message);
          }
        })
        .catch((e) => {
          this.$confirmError(e);
          this.dataListLoading = false;
        });
    },
    errorHandler() {
      return true;
    },
    handleClick(tab, event) {
      if (tab.name === "first") {
        this.getData();
      } else if (tab.name === "second") {
        // this.$nextTick(() => {
        //   this.$refs.appVersion.init(this.appId)
        // })
      }
    },
    formatDate(value) {
      return formatDate(value, "YYYY-MM-DD HH:mm:ss");
    },
    getData() {
      getAppInfo(this.appId)
        .then((data) => {
          this.appInfo = data;
          this.dataListLoading = false;
        })
        .catch((e) => {
          this.$confirmError(e);
          this.dataListLoading = false;
        });
      if (this.appVersionId !== 0 || this.appVersionId !== "0") {
        getAppVersionInfo(this.appId, this.appVersionId)
          .then(async (data) => {
            this.appVersionInfo = data;
            // 将主语言置顶
            const index = this.appVersionInfo.supportLanguage.findIndex((v) => {
              return v === this.appVersionInfo.mainLanguage;
            });
            if (index > -1) {
              this.appVersionInfo.supportLanguage.splice(index, 1);
            }
            this.appVersionInfo.supportLanguage.splice(
              0,
              0,
              this.appVersionInfo.mainLanguage
            );

            this.landscape = data.landscape;
            this.portrait = data.portrait;
            if (data.portrait === 1) {
              this.portrait = true;
            }
            if (data.landscape === 1) {
              this.landscape = true;
            }
            if (this.landscape) {
              this.screenshotType = 1;
            } else if (this.portrait) {
              this.screenshotType = 2;
            }
            await screenshotList(this.appId, {
              appVersionId: this.appVersionId,
              screenType: 1,
            })
              .then((data) => {
                this.screenshots_h = data;
              })
              .catch((e) => {
                this.$confirmError(e);
                console.log(`err:${JSON.stringify(e)}`);
              });
            await screenshotList(this.appId, {
              appVersionId: this.appVersionId,
              screenType: 2,
            })
              .then((data) => {
                this.screenshots_v = data;
              })
              .catch((e) => {
                this.$confirmError(e);
                this.dataListLoading = false;
                console.log(`err:${JSON.stringify(e)}`);
              });
            this.appLanguageInfos = [];
            // 图片插入到一个列表中
            this.appVersionInfo.supportLanguage.forEach((l) => {
              const langObj = {
                language: l,
                introduction: "",
                applicationScreenshotList: [],
              };
              const himg = this.screenshots_h.find((s) => {
                return s.language === l;
              });
              if (himg) {
                langObj.introduction = himg.introduction;
                langObj.revision = himg.revision;
                langObj.applicationScreenshotList = langObj.applicationScreenshotList.concat(
                  himg.applicationScreenshotList
                );
              }
              const vimg = this.screenshots_v.find((s) => {
                return s.language === l;
              });
              if (vimg) {
                langObj.applicationScreenshotList = langObj.applicationScreenshotList.concat(
                  vimg.applicationScreenshotList
                );
              }
              this.appLanguageInfos.push(langObj);
              console.log("langObj", langObj);
            });
            this.appVersionInfo.appLanguageInfos = [];
            // 置顶主语言，并 active
            this.appLanguageInfos.forEach((v) => {
              v.applicationScreenshotList.forEach((img) => {
                img.url = img.url + "?t=" + new Date().getTime();
              });
              if (v.language === this.appVersionInfo.mainLanguage) {
                this.appVersionInfo.appLanguageInfos.splice(0, 0, {
                  ...v,
                  isActive: true,
                });
                this.landscapePicUrls = v.applicationScreenshotList.filter((img) => {
                  return img.screenType === 1;
                });

                this.portraitPicUrls = v.applicationScreenshotList.filter((obj) => {
                  return obj.screenType === 2;
                });
              } else {
                this.appVersionInfo.appLanguageInfos.push({ ...v, isActive: false });
              }
              console.log("appLanguageInfos", this.appVersionInfo.appLanguageInfos);
            });
          })
          .catch((e) => {
            this.$confirmError(e);
            this.dataListLoading = false;
          });

        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          appId: this.appId,
          appVersionId: this.appVersionId,
          // developerName: this.dataForm.developerName
        };
        examListDetail(params)
          .then((data) => {
            this.dataList = data.data;
            this.dataList.forEach((item) => {
              console.log("===>>" + item.updTime);
            });
            this.rows = data.rows;
            this.dataListLoading2 = false;
          })
          .catch((e) => {
            this.$confirmError(e);
          });
      }
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getData();
    },
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getData();
    },
    showDetailHandle(scope) {
      this.visible = true;
      this.remark = scope.remark;
      this.editForm = scope;
      this.portraitImageFileList = [];
      this.landscapeImageFileList = [];
      this.imageFileUuidList = [];
      if (scope.modelType === 2) {
        this.portrait = true;
        this.landscape = false;
        this.dataForm.portrait = 1;
      }
      if (scope.modelType === 1) {
        this.landscape = true;
        this.portrait = false;
        this.dataForm.landscape = 1;
      }
      if (scope.testScreenshotList) {
        this.dataForm.landscape = 0;
        this.dataForm.portrait = 0;
        // this.landscape = false
        // this.portrait = false
        scope.testScreenshotList.forEach((item) => {
          if (scope.modelType === 2) {
            // this.portrait = true
            // this.dataForm.portrait = 1
            this.portraitImageFileList.push({
              fileUuid: "",
              file: "",
              name: item.sortIndex,
              url: item.url,
            });
          }
          if (scope.modelType === 1) {
            // this.landscape = true
            // this.dataForm.landscape = 1
            this.landscapeImageFileList.push({
              fileUuid: "",
              file: "",
              name: item.sortIndex,
              url: item.url,
            });
          }
          const fileUuidObj = {
            screenType: item.modelType,
            fileUuid: "",
            fileName: item.sortIndex,
            url: item.url,
          };
          this.imageFileUuidList.push(fileUuidObj);
        });
      }
      // this.portraitImageFileList = scope.testScreenshotList
      // this.fileList.forEach(item => {
      //     this.portraitImageFileList.push(item)
      // })
    },
    cancel() {
      this.visible = false;
      this.$emit("close");
      this.portraitImageFileList = [];
      this.landscapeImageFileList = [];
    },
    submitInfo() {
      this.visible = false;
      this.$emit("close");
      const params = {
        appId: this.appId,
        appVersionId: this.appVersionId,
        status: this.editForm.status,
        remark: this.remark,
        modelCode: this.editForm.modelCode,
        testScreenshot: this.imageFileUuidList,
      };

      examListRemark(params)
        .then((data) => {
          this.visible = false;
          this.portraitImageFileList = [];
          this.landscapeImageFileList = [];
          this.getData();
        })
        .catch((e) => {
          this.$confirmError(e);
        });
    },
    viewImage() {
      this.viewResVisible = true;
      this.$nextTick(() => {
        this.$refs.viewRes.init(this.appVersionId, "image");
      });
    },
    viewPermission() {
      this.viewResVisible = true;
      this.$nextTick(() => {
        this.$refs.viewRes.init(this.appVersionId, "permission");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.html-container {
  ::v-deep a {
    color: #3f9eff;
    text-decoration: underline;
  }
  ::v-deep blockquote {
    border-left: solid 4px #eeeeee;
    padding-left: 16px;
  }
  ::v-deep h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
  }

  ::v-deep h1 {
    font-size: 40px;
  }

  ::v-deep h2 {
    font-size: 32px;
  }

  ::v-deep h3 {
    font-size: 28px;
  }

  ::v-deep h4 {
    font-size: 24px;
  }
  ::v-deep h5 {
    font-size: 20px;
  }
  ::v-deep h6 {
    font-size: 16px;
  }
}

.language-block__item {
  border-top: 1px solid #eeeeee;
}

.language-block__item:first-child {
  border-top: none;
}
.mini-tag {
  margin: 12px;
  .mini-tag-label {
    border-radius: 6px 6px 0 0;
    background-color: #2b7ae2;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 4px 10px;
  }
  .mini-tag-content {
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    border-radius: 0 0 6px 6px;
    padding: 4px 10px;

    border: solid 1px #e0e0e0;
  }
}
.separator {
  float: right;
  margin: 50%;
  font-weight: 700;
  color: #c0c4cc;
}

.new-app {
  .el-form-item.support-device > .el-form-item__label {
    float: none;
  }

  .picture-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: rgb(225, 235, 255);
  }

  .picture-uploader-icon {
    font-size: 28px;
    color: #ffffff;
    text-align: center;
  }

  .picture-uploader--landscape .el-upload--picture-card,
  .picture-uploader--landscape .el-upload-list__item {
    width: 300px;
    height: 200px;
    line-height: 200px;
  }

  .picture-uploader--portrait .el-upload--picture-card,
  .picture-uploader--portrait .el-upload-list__item {
    width: 200px;
    height: 300px;
    line-height: 300px;
  }
}
</style>
